<template>
	<div>
		<div class="outdoor" v-for='item in classified'>
			<div class="duo">
				<b>{{item.content}}</b><span>更多<i class="iconfont">&#xe678;</i></span>
			</div>
			<div class="duo1">
				<img :src="item.banner[0].thumb">
				<p>{{item.banner[0].title}}</p><span>￥{{item.banner[0].price_label}}起</span>
			</div>
			<div class="duo2">
				<div class="duo3" v-for='list in item.data'>
					<img :src="list.thumb">
					<p>{{list.title}}</p>
					<span>￥{{list.price_label}}起</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		props:['classified']
	}
</script>
<style lang='stylus' scoped>
	.duo{
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding:.3rem .26rem 0 0;
		font-size: .45rem;
		border-top: .3rem solid #f5f5f5;
		padding-bottom: .26rem;
		b{
			padding-left: .6rem;
			border-left: .1rem solid #f4d101;
			color: #f4d101;
		}
		span{
			color: #7d7b7b;
			font-size: .35rem;
		}
	}
	.duo1{
		width: 100%;
		padding:.26rem;
		position: relative;
		img{
			width: 100%;
		}
		>p{
			width: 60%;
			font-size: .48rem;
			white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
            position: absolute;
            bottom: .5rem;
            padding-left: .26rem;
            color: #fff;
		}
		span{
			font-size: .45rem;
			position: absolute;
			bottom: .5rem;
			color: #FF9800;
			right: 1rem;
		}
	}
	.duo2{
		width: 100%;
		padding:0 .26rem;
		display: flex;
		justify-content: space-between;
		.duo3{
			width: 32.5%;
			background: #f9f9f9;
			padding-bottom: .14rem;
			img{
				width: 100%;
			}
			p{
				font-size: .35rem;
				display: -webkit-box;
	           	-webkit-box-orient: vertical;
	            -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 1.5;
                padding:0 .1rem;
			}
			span{
				color: #ff7100;
				font-size: .38rem;
				padding:0 .1rem;
				display: block;
				margin-top: .2rem;
			}
		}
	}
</style>